<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title></title>
	<link rel="stylesheet" href="static/css/register.css">
	<link rel="stylesheet" href="static/css/bootstrap.css">
	<script src="static/js/bootstrap.min.js"></script>
  <script src="/static/js/jquery.js"></script>
	<style>
		#main{
			width: 350px;
			margin-top: 120px;
		}
		input{
			margin-bottom: 6px;
		}
		.checkbox{
			margin-left: 20px;
		}
		body{
			width: 968px;
			margin-left: auto;
			margin-right: auto;
			background-image: url(static/images/background.jpg);
			background-repeat:no-repeat;
  			background-size:cover;
		}
	</style>
</head>
<body>
	<div class="container" id="main">
		<form action="register" class="form-signin" method="post">
      {% csrf_token %}
			<h2 class="form-signin-heading">欢迎注册</h2>
			<input type="text" class="form-control" placeholder="手机号码" name="uphone" id="uphone" maxlength="11">
			<input type="password" class="form-control" placeholder="密码" name="upwd" id="upwd">
			<input type="password" class="form-control" placeholder="确认密码" name="upwdd" id="upwdd">
			<input type="text" class="form-control" placeholder="用户名" name="uname">
			<input type="email" class="form-control" placeholder="邮箱" name="uemail">
      <label class="checkbox">
				<input type="checkbox" value="1" name="category">是否为房东
			</label>
			<label class="checkbox">
				<input type="checkbox" value="remember-me">阅读用户协议
			</label>
			<button class="btn btn-lg btn-primary btn-block" type="submit" id="registerBtn">注册</button>
		</form>
	</div>
</body>
</html>

<script>
  $('#registerBtn').click(function () {
    const uphone = $('#uphone').val();
    const upwd = $('#upwd').val();
    const upwdd = $('#upwdd').val();
    console.log(uphone, upwd, upwdd);
    console.log(typeof(uphone));
    if(typeof uphone !== 'string' || uphone.length !== 11){
      alert("输入的手机号不正确");
      return false
    }else{
      if(upwd !== upwdd){
        alert("两次输入的密码不相同");
        return false
      }
    }
  })
</script>
